<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画操作</title>
		<!-- 动画操作：针对页面弹出效果
		 show()     功能：显示效果    本质display：block
		 hide()     功能：隐藏效果    本质display：none
		 
		 slideDown() 功能：(滑动式)向下效果
		 slideUp()  功能：(滑动式)向上效果
		 
		 fadeIn()    功能：淡入效果
		 fadeOut()   功能：淡出效果
		 hover()     功能：悬停切换效果
		 -->
	</head>
	<script src="../js/jquery-1.11.1.js"></script>
	<style>
		div{
			width: 200px;
			height: 200px;
			background-color: #00ff7f;
			display: none;
		}
	</style>
	<body>
		<button id="show">显示</button>
		<button id="hide">隐藏</button>
		<button id="sd">(滑动式)向下效果</button>
		<button id="su">(滑动式)向上效果</button>
		<button id="fi">淡入效果</button>
		<button id="fo">淡出效果</button>
		
		<div></div>
		<script>
			/*1.显示和隐藏效果*/
			$("#show").click(function(){
				$("div").show();
			});
			$("#hide").click(function(){
				$("div").hide();
			});
			/*2.(滑动式)向下上效果*/
			$("#sd").click(function(){
				$("div").slideDown();
			});
			$("#sd").click(function(){
				$("div").slideUp();
			});
			/*3.淡入淡出*/
			$("#fi").click(function(){
				$("div").fadeIn(4000);
			});
			$("#fo").click(function(){
				$("div").fadeOut(4000);
			});
		</script>
	</body>
</html>